<template>
  <div class="config-panel">
    <el-tabs v-model="tagName">
      <el-tab-pane label="表单" name="form">
        <config-form
          :formConfig="props.formConfig"
          @changeFormConfig="changeFormConfig"
        />
      </el-tab-pane>
      <el-tab-pane label="组件" name="component">
        <base-empty v-show="!componentConfig" />
        <component
          :is="componentConfig"
          :currentItem="props.currentItem"
          @changeSchema="changeSchema"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ElTabs, ElTabPane } from "element-plus";
import configForm from "./config-form.vue";
import { computed, PropType, ref } from "vue";
import BaseEmpty from "../base/base-empty.vue";
import { DraggableTreeNode, FormConfig } from "../../type";
import { configComponents, componentTypeToConfig } from "../../base-components";

const props = defineProps({
  currentItem: {
    type: Object as PropType<DraggableTreeNode | null>,
    default: null,
  },
  formConfig: {
    type: Object as PropType<FormConfig>,
    default: () => {
      return {};
    },
  },
});
const tagName = ref("form");
const componentConfig = computed(() => {
  if (!props.currentItem) return;
  return configComponents[
    componentTypeToConfig(props.currentItem.componentType)
  ];
});
const emit = defineEmits(["changeFormConfig", "changeSchema"]);
// 表单值更改
function changeFormConfig(e: FormConfig) {
  emit("changeFormConfig", e);
}
// 具体的组件配置更改
function changeSchema(e: DraggableTreeNode) {
  emit("changeSchema", e);
}
</script>

<style lang="scss" scoped></style>
